<script>
/**
 * @desc 环形图部分
 */

import { mapState } from 'vuex'
import DoughnutChart from '@/components/doughnut-chart'
import { wayMap, hsla2rgba, numberFixed } from '@/utils'

export default {
  name: 'chart-pie',

  props: {
    typeIndex: { type: Number, default: 0 },
    data: { type: Array, default: () => [] }
  },

  components: { DoughnutChart },

  data: () => ({ currLegend: 0 }),

  computed: {
    ...mapState(['systemInfo']),
    chartSize() {
      return 0.5 * (this.systemInfo.screenWidth - 80)
    },

    mergeData() {
      let mergeArr = this.data.filter(v => v.type === this.typeIndex)
      const totalMoney = mergeArr.reduce((pre, curr) => pre + curr.money, 0)

      mergeArr = mergeArr.reduce((pre, curr) => {
        const eqIndex = pre.findIndex(item => item.way === curr.way)
        if (eqIndex !== -1) {
          pre[eqIndex].money += curr.money
          return pre
        } else {
          return [...pre, { way: curr.way, money: curr.money }]
        }
      }, [])
      mergeArr = mergeArr.map(v => ({
        ...v,
        percent: numberFixed(100 * v.money / totalMoney)
      }))
      // to update checked legend
      this.currLegend = 0
      return mergeArr
    },

    chartList() {
      return this.mergeData.map(v => v.money)
    },

    legendList() {
      const len = this.mergeData.length
      const hue = numberFixed(360 / len)
      return this.mergeData.map((v, i) => ({
        name: wayMap[this.typeIndex][v.way].text,
        color: hsla2rgba(hue * i, 0.82, 0.67, 1),
        percent: v.percent
      }))
    },

    moneyText() {
      return `￥${numberFixed(this.chartList[this.currLegend])}`
    }
  },

  methods: {
    onLegendClick(index) {
      this.currLegend = index
    }
  }
}
</script>

<template>
  <div :class="$sty.container">
    <div :class="$sty.chartView">
      <div :class="$sty.viewItem">
        <doughnut-chart
          :list="chartList"
          :size="chartSize"
        />
        <text :class="$sty.moneyText">{{moneyText}}</text>
      </div>
      <div :class="$sty.viewItem">
        <p
          :class="i===currLegend ? $sty.legendActive : $sty.legend"
          :key="i"
          @click="onLegendClick(i)"
          v-for="(v,i) in legendList"
        >
          <i
            :class="$sty.point"
            :style="{backgroundColor:v.color}"
          ></i>
          <text>{{v.name}} {{v.percent}}%</text>
        </p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" module>
$indent: 30px;

.container {
  margin: 10px 0;
}

.chartView {
  display: flex;
  align-items: center;
}

.viewItem {
  flex: 1;
  position: relative;
}

.moneyText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
}

.legend {
  position: relative;
  padding-left: $indent;
  line-height: 2;
  font-size: 16px;
  opacity: 0.5;

  & > .point {
    position: absolute;
    top: 50%;
    left: $indent - 20px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translateY(-50%);
  }
}

.legendActive {
  @extend .legend;
  opacity: 1;
}
</style>
